<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-show的使用</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--
            v-if和v-show的区别
            1.两种在表现形式上效果是一样的
            2.v-if实际上是通故宫创建和删除DOM完成效果的显示和不显示
            3.v-show实际上，如果是不显示则是通过添加style样式，display:none来进行隐藏的的，实际上并没有从DOM中进行删除
            4.应用场景
              1) v-if 指令有更高的切换消耗 v-if当条件成立的时候会将元素加上，不成立的时候，就会移除dom，并且内部的指令不会执行
              2) v-show 指令有更高的初始渲染消耗,v-show只是简单的隐藏和显示
              经验：如果需要频繁切换使用 v‐show 较好，如果在运行时条件不大可能改变 使用v‐if 较好
        -->
        <div v-show="flag">如果为true，则显示</div>
    </div>
</body>
</html>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            flag:true
        }
    });
</script>